<div class="search-box mdl-shadow--2dp">
  <div class="search-wrap mdl-grid">
    <button mdl-button (click)="pickAStartDate($event)" mdl-button-type="icon" mdl-ripple>
      <mdl-icon>event</mdl-icon>
    </button>
    <span>{{ startDate?.format('LL') || '开始日期'}}</span>
    <button mdl-button (click)="pickAEndDate($event)" mdl-button-type="icon" mdl-ripple>
      <mdl-icon>event</mdl-icon>
    </button>
    <span>{{ endDate?.format('LL') || '结束日期'}}</span>

    <button mdl-button (click)="getInactiveUser($event)" mdl-ripple mdl-colored="primary">
      查看最近三个月没有活动记录
    </button>
    <!-- <mdl-select *ngIf="!isUserProperty" class="mdl-cell mdl-cell--3-col" label="选择项目" floating-label [(ngModel)]="selected.project"
      (change)="projectChange()">
      <mdl-option *ngFor="let p of projects" [value]="p.id">{{p.name}}</mdl-option>
    </mdl-select>
    <mdl-select class="mdl-cell mdl-cell--3-col" label="选择塔楼" floating-label [(ngModel)]="selected.building" (change)="buildingChange()">
      <mdl-option *ngFor="let p of buildings" [value]="p.id">{{p.buildingAlias || p.buildingNumber}}</mdl-option>
    </mdl-select>
    <mdl-select class="mdl-cell mdl-cell--3-col" label="选择楼层" floating-label [(ngModel)]="selected.floor" (change)="floorChange()">
      <mdl-option *ngFor="let p of floors" [value]="p.id">{{p.index}}</mdl-option>
    </mdl-select>
    <mdl-select class="mdl-cell mdl-cell--3-col" label="选择单元" floating-label [(ngModel)]="selected.unit" (change)="unitChange()">
      <mdl-option *ngFor="let p of units" [value]="p.id">{{p.name}}</mdl-option>
    </mdl-select> -->
  </div>
</div>
<div class="page-container">
  <div class="data-table-container">
    <ngx-datatable [rows]="rows" [columns]="columns" [headerHeight]="40" [rowHeight]="100" [columnMode]="'force'" [headerHeight]="50"
      [footerHeight]="50" [rowHeight]="'auto'" [externalPaging]="true" [messages]="pagerMessage" [count]="count" [offset]="offset"
      [loadingIndicator]="isPageLoading" [limit]="limit" (page)='onPage($event)' class="material fullscreen">
      <ngx-datatable-column name="gender">
        <ng-template let-column="column" ngx-datatable-header-template>
          性别
        </ng-template>
        <ng-template let-value="value" ngx-datatable-cell-template>
          {{ value === 1 ? '男' : '女' }}
        </ng-template>
      </ngx-datatable-column>
      <ngx-datatable-column name="age">
        <ng-template let-column="column" ngx-datatable-header-template>
          年龄
        </ng-template>
        <ng-template let-value="value" ngx-datatable-cell-template>
          {{ value === -1 ? '未识别' : value }}
        </ng-template>
      </ngx-datatable-column>
      <ngx-datatable-column name="quality">
        <ng-template let-column="column" ngx-datatable-header-template>
          质量
        </ng-template>
        <ng-template let-value="value" ngx-datatable-cell-template>
          {{ value }}
        </ng-template>
      </ngx-datatable-column>
      <ngx-datatable-column name="timestamp">
        <ng-template let-column="column" ngx-datatable-header-template>
          抓拍时间
        </ng-template>
        <ng-template let-value="value" ngx-datatable-cell-template>
          {{ value }}
        </ng-template>
      </ngx-datatable-column>
      <ngx-datatable-column name="staff">
        <ng-template let-column="column" ngx-datatable-header-template>
          所属公司
        </ng-template>
        <ng-template let-value="value" ngx-datatable-cell-template>
          {{ value ? value.company.name : '非员工' }}
        </ng-template>
      </ngx-datatable-column>
      <ngx-datatable-column name="photo">
        <ng-template let-column="column" ngx-datatable-header-template>
          抓拍照片
        </ng-template>
        <ng-template let-value="value" ngx-datatable-cell-template>
          <img [ngStyle]="{'height': '70px'}" src="{{ value }}" />
        </ng-template>
      </ngx-datatable-column>
    </ngx-datatable>
  </div>
</div>